<style scoped>
  @import "../../static/css/weui.css";
  @import "../../static/css/jquery-weui.min.css";
  .weui_cells:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    border-top: 1px solid #D9D9D9;
    color: #D9D9D9;
  }
  .weui_cells_form .weui_cell_ft {
    transform: scale(0.7);
  }
  .weui_cell.fir {
    border-top: 0;
  }
  .weui_label {
    display: block;
    width: 105px;
    word-wrap: break-word;
    word-break: break-all;
    text-align: left;
  }
</style>
<template>
  <div id="app-main">
    <div class="rj-wrap" style="background: #fff;">
      用户资料完善
      <a href="javascript:;" @click="$router.back(-1)" style="position: absolute; left: 10px; top: 8px">
        <img src="@/assets/back.png" style="width: 20px" />
      </a>
    </div>
    <form id="registerForm">
      <div id="form_div" class="weui_cells weui_cells_form" style="margin-top: 0;">
        <div class="cellgroup">

          <div class="weui_cell fir">
            <div class="weui_cell_hd">
              <label class="weui_label">姓名</label>
            </div>
            <div class="weui_cell_bd weui_cell_primary">
              <input class="weui_input" type="text" name="realname" v-model="user.nickName" placeholder="请输入姓名" />
            </div>
          </div>
          <div class="weui_cell weui_cells_form">
            <div class="weui_cell_hd">
              <label class="weui_label">手机</label>
            </div>
            <div class="weui_cell_bd weui_cell_primary">
              <input class="weui_input" id="telphone" disabled type="number" name="telphone" :value="user.phonenumber" placeholder="请输入手机号码"/>
            </div>
          </div>
          <div class="weui_cell">
            <div class="weui_cell_hd"><label class="weui_label">用户类型</label></div>
            <div class="weui_cell_bd weui_cell_primary">
              <select class="weui-select" name="type" v-model="user.userType">
                <option value="" disabled>请选择用户类型</option>
                <option v-for="dict in types" :value="dict.dictValue" :key="dict.dictValue">{{dict.dictLabel}}</option>
              </select>
            </div>
          </div>
        </div>
        <template v-if="user.userType == 1">
          <div class="cellgroup">
            <div class="weui-cells__title" style="text-align: left;margin-left: 15px;">银行账户信息</div>
              <div class="weui_cell fir">
                <div class="weui_cell_hd">
                  <label class="weui_label">户名</label>
                </div>
                <div class="weui_cell_bd weui_cell_primary">
                  <input class="weui_input" type="text" v-model="user.bankName" placeholder="请输入户名" />
                </div>
              </div>
              <div class="weui_cell">
                <div class="weui_cell_hd">
                  <label class="weui_label">开户行</label>
                </div>
                <div class="weui_cell_bd weui_cell_primary">
                  <input class="weui_input" type="text" v-model="user.bank" placeholder="请输入开户行" />
                </div>
              </div>
              <div class="weui_cell">
                <div class="weui_cell_hd">
                  <label class="weui_label">账号</label>
                </div>
                <div class="weui_cell_bd weui_cell_primary">
                  <input class="weui_input" type="text" v-model="user.bankcode" placeholder="请输入账号" />
                </div>
              </div>
            </div>
          </template>
      </div>

      <div class="weui_btn_area">
        <a class="weui_btn weui_btn_primary" @click="doSave();" href="javascript:"  id="btn">保存</a>
      </div>
    </form>
  </div>
</template>

<script type="text/babel">
  export default {
    name: 'userinfo',
    data: () => ({
      user: {
        userType: ''
      },
      types: [],
    }),
    components: {
    },
    created() {
      this.getUserInfo();
      this.getTypes();
    },
    mounted() {
    },
    methods: {
      getTypes: async function() {
        let that = this;
        await this.axios({
          method: 'get',
          url: '/prod-api/system/dict/data/type/user_type',
        }).then(response => {
          if (response.data.code == 200) {
            that.types = response.data.data;
          } else {
            this.toastText('获取用户类型数据失败');
          }
        });
      },
      getUserInfo: function() {
        this.axios({
          method: 'get',
          url: '/prod-api/getUserInfo'
        }).then(response => {
          if (response.data.code == 200) {
            this.user = response.data.data;
            if (this.user.supplier) {
              this.user.bank = this.user.supplier.bank;
              this.user.bankName = this.user.supplier.name;
              this.user.bankcode = this.user.supplier.bankcode;
            }
          }
        });
      },
      doSave: function(){
        let that = this;
        console.log('this.user.nickName:', this.user.nickName)
        if(!this.user.nickName){
          this.toastText('请输入姓名')
          return false;
        }
        if(!this.user.userType){
          this.toastText('请选择用户类型')
          return false;
        }
        if(this.user.userType == 1 && !this.user.bankName){
          this.toastText('请输入户名')
          return false;
        }
        let model = {userId: this.user.userId, nickName: this.user.nickName, userType: this.user.userType};
        if (this.user.userType == 1) {
          model.bank = this.user.bank;
          model.bankName = this.user.bankName;
          model.bankcode = this.user.bankcode;
        }
        this.axios({
          method: 'put',
          url: '/prod-api/system/user',
          data: model
        }).then(response => {
          if (response.data.code == 200) {
            that.toastSuccess('保存成功');
            setTimeout(() => {
              // location.href="/weixin/WechatCenter!index.action";
              that.$router.push({name: 'mine'});
            }, 1000)
          } else if (response.data.msg) {
            that.toastText(response.data.msg);
          } else {
            that.toastText("系统错误");
          }
        });
      }
    }
  };
</script>
